<template>
    <div class="layout-container">
        <div class="layout-container-form">
            <div class="layout-container-form-handle">
                <div>
                    <el-button placeholder="新增" @click="gardenAdd">新增</el-button>
                </div>

                <div>
                    <el-button placeholder="批量爬虫" @click="batchStart">批量爬虫</el-button>
                </div>
            </div>

            <div class="layout-container-form-search">
                <div>
                    <el-input v-model="page.po.name" placeholder="请输入名称" clearable />
                </div>

                <div>
                    <el-select v-model="page.po.province" placeholder="省份" clearable @change="getTableData" filterable>
                        <el-option v-for="item in provinceList" :label="item" :value="item" />
                    </el-select>
                </div>

                <div>
                    <el-button type="primary" :icon="Search" @click="getTableData">搜索</el-button>
                </div>
            </div>
        </div>

        <div class="layout-container-table">
            <Table ref="table" v-model:page="page" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" @getTableData="getTableData">
                <el-table-column type="selection" />

                <el-table-column prop="id" label="ID" align="center" width="90" />

                <el-table-column prop="city" label="城市" align="left" />

                <el-table-column prop="name" label="名称" align="left" width="320" />

                <el-table-column prop="countDianping" :show-overflow-tooltip="true" label="大众" align="left" />

                <el-table-column prop="countCtrip" :show-overflow-tooltip="true" label="携程" align="left" />

                <el-table-column prop="countQunaer" :show-overflow-tooltip="true" label="去哪" align="left" />

                <el-table-column prop="countTongcheng" :show-overflow-tooltip="true" label="同程" align="left" />

                <el-table-column prop="tongchengUrl" :show-overflow-tooltip="true" label="连接" align="left" width="165">
                    <template #default="scope">
                        <el-space wrap>
                            <el-link v-if="scope.row.dianpingUrl" type="primary" :href="scope.row.dianpingUrl">大众</el-link>
                            <el-link v-if="scope.row.ctripUrl" type="primary" :href="scope.row.ctripUrl">携程</el-link>
                            <el-link v-if="scope.row.qunaerUrl" type="primary" :href="scope.row.qunaerUrl">去哪</el-link>
                            <el-link v-if="scope.row.tongchengUrl" type="primary" :href="scope.row.tongchengUrl">同程</el-link>
                        </el-space>
                    </template>
                </el-table-column>

                <el-table-column prop="dateStart" label="开始时间" align="left" width="100" :formatter="getDateStr" />

                <el-table-column prop="dateEnd" label="结束时间" align="left" width="100" :formatter="getDateStr" />

                <el-table-column prop="countAll" label="总数" align="left" />

                <el-table-column label="操作" align="center" fixed="right" width="220">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="gardenEdit(scope.row)">编辑</el-button>

                        <el-button type="success" size="small" @click="spider(scope.row)">爬虫</el-button>

                        <el-button type="danger" size="small" @click="gardenClear(scope.row)">清洗</el-button>
                    </template>
                </el-table-column>

                <el-table-column label="查看" align="center" fixed="right" width="140">
                    <template #default="scope">
                        <el-link type="success" @click="viewComment(scope.row)">评论</el-link> &nbsp;
                        <el-link type="success" @click="viewStatistics(scope.row)">统计</el-link> &nbsp;
                        <el-link type="success" @click="viewLog(scope.row)">日志</el-link> &nbsp;
                    </template>
                </el-table-column>
            </Table>
        </div>

        <GardenPop v-if="gardenForm.show" :gardenForm="gardenForm" @saveDone="getTableData" />
        <SpiderSelect v-if="spiderForm.show" :spiderForm="spiderForm" @commit="commitSpider" />
    </div>
</template>

<script setup lang="ts">
import {onActivated, reactive, ref}                                                from 'vue'
import {page as gardenPage, provinceList as loadProvinceList, spider as spiderRun} from "@/api/garden"
import {removeByGardenId}                                                          from "@/api/comment";
import {Search,}                                                                   from '@element-plus/icons-vue'
import Table                                                                       from '@/components/table/index.vue'
import {ElMessage}                                                                 from "element-plus";
import {AreYouSure}                                                                from "@/utils/areyousure";
import router                                                                      from "@/router";
import GardenPop                                                                   from '@/views/main/garden/manage/component/garden-pop.vue'
import SpiderSelect                                                                from "@/views/main/garden/manage/component/spider-select.vue";
import {getDateStr}                                                                from "@/utils/time";

// 选择项
const selectedList = ref([])

/**
 * 调整选中
 */
function handleSelectionChange(list: any) {
    selectedList.value = list
}

/**
 * 批量启动
 */
async function batchStart() {
    if (selectedList.value.length === 0) {
        ElMessage.warning("请选择启动项")
        return
    }

    spiderForm.data.gardenIds = selectedList.value.map((garden: any) => garden.id)
    spiderForm.show           = true
}

/**
 * 查看评论
 */
function viewComment(garden: any) {
    router.push({
        path : "/garden/comment",
        query: {
            gardenId: garden.id
        }
    })
}

/**
 * 查看统计
 */
function viewStatistics(garden: any) {
    router.push({
        path : "/garden/statistics",
        query: {
            gardenId  : garden.id,
            gardenName: garden.name,
        }
    })
}

/**
 * 查看日志
 */
function viewLog(garden: any) {
    router.push({
        path : "/garden/log",
        query: {
            gardenId: garden.id,
        }
    })
}

interface PageInterface {
    current: any,
    size: any,
    total: any,
    orders: any,
    po: any,
}

// 分页参数, 供table使用
const page: PageInterface = reactive({
    current: 1,
    size   : 20,
    total  : 0,
    orders : [{column: "id", asc: false}],
    po     : {
        province: null,
        name    : null,
    },
})

// 弹窗控制器
const gardenForm = reactive({
    show: false,
    data: {},
    mode: "add"
})

/**
 * 新增
 */
function gardenAdd() {
    gardenForm.mode = "add"
    gardenForm.data = {}
    gardenForm.show = true
}

/**
 * 编辑
 */
function gardenEdit(garden: any) {
    gardenForm.mode = "edit"
    gardenForm.data = Object.assign({}, garden)
    gardenForm.show = true
}

// 爬虫选择
const spiderForm: any = reactive({
    show: false,
    data: {
        gardenIds: [],
        sites    : []
    },
})

/**
 * 爬虫
 */
function spider(garden: any) {
    spiderForm.data.gardenIds = [garden.id]
    spiderForm.show           = true
}

function commitSpider() {
    spiderRun(spiderForm.data).then((res: any) => {
        if (res.code === 200) {
            ElMessage.success("成功")
        }
        else {
            ElMessage.error("失败")
        }
    }).finally(() => {
        getTableData()
    })
}

/**
 * 清洗
 */
function gardenClear(garden: any) {
    AreYouSure().then(() => {
        loading.value = true
        removeByGardenId(garden.id).then((res: any) => {
            if (res?.code === 200) {
                ElMessage.success("成功")
            }
            else {
                ElMessage.error("失败")
            }
        }).finally(() => {
            getTableData()
        })
    })
}

const loading   = ref(true)
const tableData = ref([])

/**
 * 获取表格数据
 * @author mbb
 */
const getTableData = () => {
    loading.value = true

    let pageQuery = Object.assign({}, page)
    delete pageQuery.total
    gardenPage(pageQuery).then(res => {
        tableData.value = res.data.records
        page.current    = res.data.current
        page.total      = res.data.total
    }).finally(() => {
        loading.value = false
    })
}

const provinceList = ref([])

function initParam() {
    loadProvinceList().then((res: any) => {
        provinceList.value = res?.data || []
    })

    page.po.name = router.currentRoute.value.query.gardenName || null
}

// -----------------------------主程序start-----------------------------------------
onActivated(() => {
    initParam()
    getTableData()
})
// -----------------------------主程序end-----------------------------------------

</script>

<style>

</style>

